require(['./config'], () => {
    require(['template', 'header', 'footer', 'fly', 'zoom'], (template) => {
      class Detail {
        constructor () {
          this.getData().then(() => {
            //console.log(template)
            this.addTocart()
            this.detaildown()
            this.topbutton()
            this.zoom()
          })
          
        }
        // detail
        detaildown(){
          $(() => {
              $('li:has(.detail)').hover(function () {
                // 如果100ms内再次进入，把定时器清除，就不隐藏了
                clearTimeout(this.timer)
                $(this).children('.detail').stop().slideDown(500)
              }, function () {
                // 离开的时候可能会再短时间内再次进入，所以用一个延时器
                this.timer = setTimeout(() => {
                  $(this).children('.detail').stop().slideUp(500)
                }, 100)
              })
            })
      }
      // 回到顶部
      topbutton(){
        $(window).scroll(function(){
          if ($(window).scrollTop()>100){ 
            $("#topBtn").fadeIn(700); 
        }
        else                           
        {
            $("#topBtn").fadeOut(700); 
        }
          $('#topBtn').on('click', function() {
            $('body,html').animate({ 
              scrollTop:0 
          },700);
        })
        return true; 
        })
      }
      // getData
        getData () {
          const id = Number(window.location.search.slice(4))
        
          return new Promise(resolve => {
            $.get('http://rap2api.taobao.org/app/mock/236370/detail', { id }, resp => {
            
              if (resp.code === 200) {
                const { detail } = resp.body
                this.detail = { ...detail, id } 
                 $('#detail').html(template('detailTemplate', { ...this.detail }))
                resolve()
              }
              _this.setAddnumber()
              _this.setAllnumber()
            })
          })   
        }
        // 减法
        setAllnumber(){
          const _this = this
          $('#sub').on('click', function(){
            const id = $(this).parents('#detail').attr('data-id')
            _this.cart = _this.cart.map(shop => {
              if (shop.id == id){
                if(shop.count == 1){

                }else{
                  shop.count--
                }
              }
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.getData ()
          })
        }
        // 加法
        setAddnumber(){
          const _this = this
          $('#plus').on('click', function(){
            const id = $(this).parents('#detail').attr('data-id')
            _this.cart = _this.cart.map(shop => {
              if (shop.id == id){
                if(shop.count > 5){
                  alert('限购5件')
                }else{
                  shop.count++
                }
              }
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.calcTotalPrice ()
          })
        }
        addTocart () {
          
          $('#add-to-cart-btn').on('click', e => {
            this.fly(e)
            let cart = localStorage.getItem('cart')
                   if(cart){
                       //意味这有数据,先把取出来的数据转成json数组
                       //判断当前商品在购物车是否已存在
                       //如果已存在，count数量加上去，如果不存在，就push
                       //最后再存
                       cart = JSON.parse(cart)
                       //some方法只要遍历到一个满足条件的就不会继续遍历了，所以i存的就是最后满足条件的下标
                       //let i
                       const isExsit = cart.some((shop, index) => {
                           //i = index
                           return shop.id === this.detail.id
                       })
                       if(isExsit){
                           //已存在
                            cart = cart.map(shop => {
                                if(shop.id === this.detail.id) shop.count++
                                return shop
                            })
                       }else{
                           //当前商品第一次加购物车
                            cart.push({
                                ...this.detail,
                                count: 1,
                                check: true
                            })
                       }
                       localStorage.setItem('cart', JSON.stringify(cart))
                   }else{
                       //购物车为空，创建一个只有当前商品这一条数据的数组，存进去
                       //出来存detail自身的属性以外，还要存数量count(默认为1，实际上可以写input的value)
                       localStorage.setItem('cart', JSON.stringify([ {
                           ...this.detail,
                           count: 1,
                           check: true
                       }]))
              }

          })
        }
          fly(e){
            const _this = this
            $(`<img src="${this.detail.imgs[0]}" style="width: 30px;height:30px;border-radius:50%">`).fly({
              start:{
                left: e.clientX, 
                top: e.clientY, 
              },
              end:{
                left: $('.cart').offset().left,
                top: $('.cart').offset().top - document.documentElement.scrollTop,
                
              },
              speed: 1.1, 
              vertex_Rtop: 30,
              onEnd: function(){
                this.destroy()
                header.calcCartCount()
              }
            })

          }


        zoom () {
          $('.zoom-image').elevateZoom({
            gallery: 'gal1'
          })
        }
      } 
      new Detail()
    })
  })